<template>

    <h3>8.数组变化侦测</h3>
    <button @click="addList">添加数据</button>
    <ul>
        <li v-for="(value, index) in names">{{ value }}</li>
    </ul>

    <button @click="concatList">合并数组1和2</button>
    <h5>数组1</h5>
    <ul>
        <li v-for="(value, index) in num1" :index="index">{{ value }}</li>
    </ul>
    <h5>数组2</h5>
    <ul>
        <li v-for="(value, index) in num2" :index="index">{{ value }}</li>
    </ul>



</template>

<script>

    export default {
        data(){
            return{
                names:['iwen', 'ime', 'frank'],
                num1:[1, 2, 3],
                num2:[4, 5, 6]
            }
        },
        methods:{
            
            addList(){
                // 1. Vue能够在使用数组的变更方法时，触发界面的更新，即改变原数组的方法
                // 有push(), pop(), shift(), unshift(), splice(), sort(), reverse()
                //this.names.push("sakura")

                // 2. 对于替换数组方法，界面不会更新，即返回一个新的数组
                // 如filter(), concat(), slice()
                this.names.concat(["sakura"])
                console.log(this.names.concat(["sakura"]))
            },

            concatList(){
                //对于替换数组方法，想要改变界面需要重新赋值
                this.num1 = this.num1.concat(this.num2)
            }
        }
    }

</script>